<template>
  <!-- 所有组件属性 -->
  <div class="widgrtAttrList">
    <!-- 标题 -->
    <div class="title">
      <h3>{{type && list[type]['title']}}</h3>
    </div>
    <!-- 组件操作信息 -->
    <component :is="type&& list[type]['com']" :comData="comData" :disabledType="disabledType"
      @AddItem="AddItem" @AddItemPoster="AddItemPoster">
    </component>
  </div>
</template>

<script>
// 小组件属性
import DetailBoxAttr from '@/components/singlePage/model/widgetAttrList2/detailBoxAttr.vue'//详情信息
import PosterAttr from '@/components/singlePage/model/widgetAttrList2/posterAttr.vue'//海报位
import TextposterAttr from '@/components/singlePage/model/widgetAttrList2/textposterAttr.vue'//文字海报
import NavBox1Attr from '@/components/singlePage/model/widgetAttrList2/navBox1Attr.vue'//导航栏1
import NavBox2Attr from '@/components/singlePage/model/widgetAttrList2/navBox2Attr.vue'//导航栏2
import NavBox3Attr from '@/components/singlePage/model/widgetAttrList2/navBox3Attr.vue'//导航栏3
import ListBoxAttr from '@/components/singlePage/model/widgetAttrList2/listBoxAttr.vue'//列表页

import {DETAIL_ATTRLIST} from '@/commont/constants/otherConfig'; // 静态配置
export default {
  name: "widgrtAttrList",
  components: {
    DetailBoxAttr,PosterAttr,TextposterAttr,
    NavBox1Attr,NavBox2Attr,NavBox3Attr,ListBoxAttr
  },
  props: {
    comData: {
      type: Object,
      default: () => {}
    },
    disabledType:{
      type:Boolean,
      default: false
    }
  },
  data () {
    return {
      list: DETAIL_ATTRLIST,
    }
  },
  computed: {
    type(){
      //组件类型
      return this.comData.type;
    }
  },
  watch: { },
  mounted () {},
  methods:{
    // 添加推荐位
    AddItem(data){
      this.$emit('AddItem',data);
    },
    // 添加海报位
    AddItemPoster(data){
      this.$emit('AddItemPoster',data);
    },
    
  }
}
</script>

<style lang="less" scoped>
.widgrtAttrList{
  margin-top: 15px;
  // 标题
  .title{
    display: flex;
    align-items: center;
    padding: 0 15px;
    h3{
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
    // 编辑提示
    .tips{
      color:#e6a23c;
      margin-left: 10px;
      &:hover{
        .tipsCon {
          display: block;
        }
      }
    }
    .tipsCon{
      display: none;
      background: #fff;
      padding: 10px;
      border: 1px solid #cdcdcd;
      position: absolute;
      top: 40px;
      z-index: 9;
    }
  }
  
  // 模板信息
  .comInfo{
    margin-top: 10px;
    margin-left: 5px;
    .item{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 8px;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;
      &:nth-last-child(1){
        border: none;
      }
      .label{
        width: 80px;
        font-weight: bold;
      }
      .infoCon{
        width: calc(100% - 80px);
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        div{
          display: flex;
          align-items: center;
        }
      }
    }
  }

}
</style>